<template>
  <div class="main">
    <div class="inner">
      <div class="head fs-28">{{ $t('ismsg.economics.title') }}</div>
      <el-row :gutter="20">
        <el-col :md="6" :sm="12" :xs="12">
          <div class="listItem item1  wow fadeInDown">
            <p><span class="number fs-22">{{ $t('ismsg.economics.actions[0].per') }}</span> <span class="unit fs-12">{{
              $t('ismsg.economics.actions[0].unit') }}</span></p>
            <p class="text fs-12 line-limit-length">{{ $t('ismsg.economics.actions[0].text') }}</p>
          </div>
        </el-col>
        <el-col :md="6" :sm="12" :xs="12">
          <div class="listItem item2  wow fadeInUp">
            <p><span class="number  fs-22">{{ $t('ismsg.economics.actions[1].per') }}</span> <span class="unit  fs-12">{{
              $t('ismsg.economics.actions[1].unit') }}</span></p>
            <p class="text fs-12 line-limit-length">{{ $t('ismsg.economics.actions[1].text') }}</p>
          </div>
        </el-col>
        <el-col :md="6" :sm="12" :xs="12">
          <div class="listItem item3  wow fadeInDown">
            <p><span class="number  fs-22">{{ $t('ismsg.economics.actions[2].per') }}</span> <span class="unit  fs-12">{{
              $t('ismsg.economics.actions[2].unit') }}</span></p>
            <p class="text fs-12 line-limit-length">{{ $t('ismsg.economics.actions[2].text') }}</p>
          </div>
        </el-col>
        <el-col :md="6" :sm="12" :xs="12">
          <div class="listItem item4  wow fadeInUp">
            <p><span class="number  fs-22">{{ $t('ismsg.economics.actions[3].per') }}</span> <span class="unit  fs-12">{{
              $t('ismsg.economics.actions[3].unit') }}</span></p>
            <p class="text fs-12 line-limit-length" :title="$t('ismsg.economics.actions[3].text')">{{
              $t('ismsg.economics.actions[3].text') }}</p>
          </div>
        </el-col>
      </el-row>
      <div class="charts">
        <div class="circle wow zoomIn">
          <img src="@/assets/images/pie.png" alt="">
        </div>
        <div class="left">
          <div class="text text3  wow lightSpeedInRight hidden-lg-only">
          <span class="per fs-14">85%</span>{{ $t('ismsg.economics.text3') }}
        </div>
          <div class="text text1  wow lightSpeedInLeft">
            <span class="per fs-14">9%</span>{{ $t('ismsg.economics.text1') }}
          </div>
          <div class="text text2  wow lightSpeedInLeft">
            <span class="per fs-14">5%</span>{{ $t('ismsg.economics.text2') }}
          </div>
        </div>
        <div class="text text3  wow lightSpeedInRight hidden-md-and-down">
          <span class="per fs-14">85%</span>{{ $t('ismsg.economics.text3') }}
        </div>
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
</script>

<style lang='scss' scoped>
.main {
  position: relative;
}

.inner {
  width: 80%;
  padding: 5%;
  margin: 0 auto;
  background: url('@/assets/images/whiteBg.png') no-repeat left top;
  background-size: 100% 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 9;

  .head {
    font-size: 33px;
    font-weight: 700;
    font-family: MFBanHei_Noncommercial-Regular;
    background-image: linear-gradient(to bottom, #f99b36, #f35845);
    -webkit-background-clip: text;
    color: transparent;
    margin-bottom: 2vh;
  }

  .listItem {
    width: 100%;
    max-width: 270px;
    // height: 120px;
    margin: 1vh auto;
    padding: 1vh 1vw;
    background-color: #fbfbfb;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    p {
      text-align: center;
    }

    .number {
      font-family: HYYakuHei-HEW;
      font-size: 48px;
      color: #553122;
    }

    .unit,
    .text {
      font-size: 18px;
      color: #553122;
      font-weight: 600;
    }

    &.item1 {
      box-shadow: 0px 3px 8px 0px #ffcfc9;
    }

    &.item2 {
      box-shadow: 0px 3px 8px 0px #f9ecc7;
    }

    &.item3 {
      box-shadow: 0px 3px 8px 0px #d4ecfa;
    }

    &.item4 {
      box-shadow: 0px 3px 8px 0px #ecd4fa;
    }
  }

  .charts {
    margin-top: 5vh;
    width: 100%;
    min-height: 300px;
    display: flex;
    justify-content: space-between;
    position: relative;

    .circle {
      width: 260px;
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 9;
      transform: translate(-50%, -50%);

      img {
        width: 100%;
      }
    }

    .text {
      width: 320px;
      font-size: 18px;
      color: #553122;
      line-height: 26px;
      position: relative;

      span {
        font-size: 22px;
        color: #fff;
        padding: 5px 10px;
        border-radius: 20px;
        margin-right: .5vw;
      }
    }

    .text1  span {
        background-color: #fccb46;
      }

    .text2 {
      margin-top: 4vh;

      span {
        background-color: #41b2f5;
      }
    }

    .text3 {

      span {
        background-color: #f89538;
      }
    }
  }

}


@media screen and (max-width: 1200px) {
  .charts {
    display: block !important;
    .text1{
      margin-top: 4vh;
    }
  }

  .circle {
    left: 80% !important;
  }
}

@media screen and (max-width: 768px) {

  .circle {
    width: 175px !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    margin: 0 auto;
  }

  .text {
    margin: 0 auto;
  }
}

@media screen and (max-width: 500px) {
  .inner {
    width: 90%;
    padding: 5%;
    border-radius: 20px;
    overflow: hidden;

    .head {
      margin-bottom: 0;
      text-align: center;
    }

    .charts {
      margin-top: 1vh;

      .text {
        font-size: 14px;
        line-height: normal;

        .per {
          padding: 2px 10px;
        }
      }

      .text2,
      .text1 {
        margin-top: 1vh;
      }
    }
  }

  .text {
    width: 100% !important;
  }
}
</style>